<template>
	
	<view class="list">
		<view class="item" @click="goDetails(item.uid)" v-for="item in props.list" :key="item.uid">
			<view class="left">
				<image :src="item.img" mode=""></image>
				<view class="time">{{ item.VideoLength !== '00:00' ? item.VideoLength : '' }}</view>
			</view>
			<view class="right">
				<view class="title van-multi-ellipsis--l2">{{ item.title }}</view>
				<view class="right-a">
					<view class="video">
						<view class="video-a">{{ item.name }}</view>
						<view class="video-b">
							<view class="">
								<van-icon name="live" size="14" />
								{{ item.playback }}
							</view>
							<view class="b">
								<view v-if="!isShow">{{ item.VideoDate }}</view>
								<view v-else>
									<van-icon name="bars" size="13" />
									{{ item.barrage }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view v-if="!props.isHide" class="empty"><image src="@/static/nodata2.png" mode=""></image></view>
</template>

<script setup>
import { onShareAppMessage, onLoad, onShow, onHide } from '@dcloudio/uni-app'
import { defineProps, reactive, toRefs } from 'vue'
import { HistoryStore } from '@/store/history.js'
const historyStore = HistoryStore()
const props = defineProps({
	list: Array,
	isHide: Boolean
})
const state = reactive({
	isShow: false
})

const goDetails = id => {
	historyStore.getHistory({uid: 1, Videoid: id})
	uni.navigateTo({
		url: `/subpkg/details/details?uid=${id}`
	})
}

const init = () => {
	const pages = getCurrentPages()
	const page = pages[pages.length - 1]
	if (page.route === 'subpkg/Search/Search') return (state.isShow = true)
	console.log(props.isHide)
}
// 页面加载
onLoad(message => {
	console.log(props);
	init()
})

// 页面显示
onShow(() => {})

// 页面隐藏
onHide(() => {})

// 页面分享(不定义该函数 页面将无法分享)
onShareAppMessage(() => {})
const { isShow } = toRefs(state)
</script>

<style lang="scss">
.list {
	.item {
		display: flex;
		padding: 20rpx 0;
		position: relative;
		border-top: 1rpx solid #e7e7e7;	
		.left {
			image {
				width: 280rpx;
				height: 200rpx;
				border-radius: 10rpx;
			}
			.time {
				position: absolute;
				bottom: 30rpx;
				left: 210rpx;
				color: #fff;
				padding: 0 6rpx;
				font-size: 20rpx;
			}
		}
		.right {
			flex: 1;
			margin-left: 20rpx;
			font-size: 26rpx;
			.title {
				font-size: 30rpx;
				height: 120rpx;
			}
			.right-a {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #999;
				.video {
					width: 300rpx;
					.video-b {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding-top: 10rpx;
						.b {
							margin-top: 5rpx;
						}
					}
				}
			}
		}
	}
}
.empty{
	margin: 0 auto;
	image{
		margin: 200rpx  0 0 41rpx;
	}
}
</style>
